<template>
  <div class="myPage-box">
    <van-nav-bar title="个人中心" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon
          name="setting-o"
          size="18"
          color="rgb(51,51,51)"
          v-show="!login_flag"
          @click="goSet"
        />
      </template>
    </van-nav-bar>
    <main>
      <!-- 账户部分 -->
      <div class="top">
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <section>
          <a href="#/login" v-show="login_flag">请点击登录</a>
          <p v-show="!login_flag">欢迎您：{{ username ? username : tel }}</p>
        </section>
      </div>
      <!-- 操作部分 -->
      <van-grid>
        <van-grid-item icon="refund-o" text="待付款" />
        <van-grid-item icon="shop-o" text="待收货" />
        <van-grid-item icon="thumb-circle-o" text="待评价" />
        <van-grid-item icon="orders-o" text="全部订单" />
      </van-grid>
      <!-- 其他 -->
      <van-cell is-link title="地址管理" @click="1" />
      <van-cell is-link title="我的收藏夹" @click="1" />
      <van-cell is-link title="关于我们" @click="1" />
      <!-- logo -->
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
      </div>
    </main>
    <!--底部 -->
    <footer-vue></footer-vue>
  </div>
</template>

<script>
import FooterVue from "../components/FooterCom.vue";
export default {
  name: "MyPage",
  data() {
    return {
      login_flag: true,
      username: "",
      userid: "",
      token: "",
      tel: "",
    };
  },
  methods: {
    goSet() {
      this.$router.push("/set");
    },
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.userid = sessionStorage.getItem("userid");
    if (this.token) {
      this.login_flag = false;

      this.$http({
        url: "user/info",
        headers: {
          token: this.token,
        },
        params: {
          userid: this.userid,
        },
      }).then((res) => {
        this.tel = res.data.data[0].tel;
        this.username = res.data.data[0].username;
        sessionStorage.setItem("username", res.data.data[0].username);
      });
    } else {
      this.login_flag = true;
    }
  },
  components: {
    FooterVue,
  },
};
</script>

<style scoped>
.myPage-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.myPage-box main {
  flex: 1;
  background: #efefef;
}
.top {
  height: 6.25rem;
  background: #f6d2d2;
  display: flex;
  align-items: center;
  padding: 10px;
}
.top section {
  margin-left: 20px;
}
.logo {
  height: 5.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>